<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 元素dom事件 -->
    <pre @click="handler" ref="pre">一只羊，两只羊，三只羊</pre>
    <!-- 不加。native为自定义事件   加上.native变为原生dom事件 -->
    <Event1 @click.native="handler1"></Event1>
    <hr />
    <!-- 为自定义事件 -->
    <pre @memeda="handler2">一片两片三四片</pre>
    <!-- 都是自定义事件 -->
    <Event2 @click="handler3" @xxx="handler4"></Event2>
    <!-- 自定义事件 -->
    <el-button type="success" @click="handler5">我是按钮</el-button>
  </div>
</template>

<script type="text/ecmascript-6">
import Event1 from "./Event1.vue";
import Event2 from "./Event2.vue";

export default {
  name: "EventTest",

  components: {
    Event1,
    Event2,
  },

  methods: {
    // 点击事件的回调
    handler() {
      this.$refs.pre.style.color = "red";
    },

    handler1() {
      console.log("event1事件回调测试");
    },

    handler2() {
      console.log("event2事件回调测试");
    },

    handler3(params) {
      console.log(params);
    },
    handler4(params) {
      console.log(params);
    },

    handler5(e){
      console.log(e);


    }
  },
};
</script>
